<template>
  <view class="book_card_warp" @click="clickItem(item.id)">
    <view class="img_warp">
      <u-image :src="item.fileUrl" width="160upx" height="190upx"
        mode="widthFix">
        <view slot="error" style="font-size: 24upx">加载失败</view>
      </u-image>
    </view>

    <view class="book_detail">
      <view class="book_name">{{ item.name || "书籍名称" }}</view>
      <view class="book_creat_time"></view>
      <view class="book_use_num"></view>
      <view class="integral">{{ item.coinPrice }}积分</view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "book-card",
    props: {
      item: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {}
    },
    methods: {
      clickItem(id) {
        this.$u.route('/pages/book_detail/book_detail', {
          id
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .book_card_warp {
    width: 100%;
    // height: 190upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20upx;
    border-bottom: 2upx solid #ccc;

    .img_warp {
      width: 160upx;
      height: 190upx;
      flex-shrink: 0;
    }

    .book_detail {
      flex: 1;
      margin-left: 20upx;
      position: relative;

      .book_name {
        width: 520upx;
        height: 44upx;
        font-size: 32upx;
        font-weight: bold;
        line-height: 44upx;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .book_creat_time {
        height: 34upx;
        font-size: 24upx;
        font-weight: 500;
        line-height: 34upx;
        color: #666666;
        margin-top: 22upx;
        padding-left: 10upx;
      }

      .book_use_num {
        margin-top: 40upx;
        height: 32upx;
        font-size: 22upx;
        font-weight: 500;
        line-height: 32upx;
        color: #666666;
      }

      .integral {
        @include positionRB();
        height: 50upx;
        font-size: 36upx;
        font-weight: 800;
        line-height: 50upx;
        color: #ff3b30;
      }
    }
  }
</style>
